<template>
	<view>
		<view class="grace-header-cate">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index" :data-cateid="cate.cateId" :data-index="index"
					:class="[cateCurrentIndex == index ? 'grace-tab-current' : '']" @tap="tabChange">{{cate.name}}
				</view>
			</scroll-view>
		</view>
		<view style="height:50px;"></view>
		<!-- 文章内容区 -->
		<view class="grace-news-list">
			<block v-for="(item, index) in artList" :key="index">
				<!-- 一张图 -->
				<navigator v-if="item.art_content.length < 3" open-type="navigate"
					:url="'../info/info?artid='+item.art_id">
					<view class="grace-news-list-img-news">
						<view class="grace-news-list-title-main">{{item.art_title}}</view>
						<view class="grace-news-list-img-big">
							<image :src="item.art_content[0]" mode="widthFix"></image>
						</view>
					</view>
				</navigator>
				<!-- 三张图 -->
				<navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid='+item.art_id">
					<view class="grace-news-list-img-news">
						<view class="grace-news-list-title-main">{{item.art_title}}</view>
						<view class="grace-news-list-imgs">
							<view class="imgs">
								<image :src="item.art_content[0]" mode="widthFix"></image>
							</view>
							<view class="imgs">
								<image :src="item.art_content[1]" mode="widthFix"></image>
							</view>
							<view class="imgs">
								<image :src="item.art_content[2]" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	let _self, cate = 0,
		page = 1
	export default {
		data() {
			return {
				categories: [{
					cateId: 0,
					name: "全部"
				}],
				cateCurrentIndex: 0,
				artList: []
			}
		},
		onLoad() {
			this.getCategory();
			// this.getNewsList();
		},
		onShow() {
			// 获取缓存中的分类数据
			this.getNewsList();
			// uni.getStorage({
			// 	key: 'categories',
			// 	success: (res) => {
			// 		// console.log(2222,res);
			// 		if (res.data.length == 0) {
			// 			this.getCategory();
			// 		} else {
			// 			this.categories = res.data
			// 		}
			// 	}
			// })
		},
		onPullDownRefresh: function() {
			page = 1;
			this.artList = [];
			this.getNewsList();
		},
		onReachBottom: function() {
			this.getNewsList();
		},
		methods: {
			getCategory() {
				_self = this;
				// 加载文章分类
				uni.request({
					url: _self.apiServer + 'category',
					method: 'GET',
					success: res => {
						console.log(111,res);
						if (res.data.message == 'ok') {
							var categories = res.data.data;
							for (var k in categories) {
								_self.categories.push({
									cateId: k * 1 + 1,
									name: categories[k].cate_name
								});
							}
							uni.setStorage({
								key: 'categories',
								data: _self.categories,
								success: (res) => {
									console.log(333,res);
								}
							})

						}
					}
				});
			},
			tabChange: function(e) {
				var cateid = e.currentTarget.dataset.cateid;
				var index = e.currentTarget.dataset.index;
				page = 1;
				this.cateCurrentIndex = index;
				cate = cateid;
				this.artList = [];
				this.getNewsList();
			},
			getNewsList: function() {
				uni.showLoading({
					'title': "加载中..."
				});
				uni.request({
					url: this.apiServer + 'getList?cate=' + cate + '&page=' + page,
					method: 'GET',
					success: res => {
						console.log(222,res);
						if (res.data.status == 'empty') {
							uni.showToast({
								title: "已经加载全部新闻",
								icon: "none"
							});
						} else if (res.data.message == 'ok') {
							var newsList = res.data.data;
							for (var i = 0; i < newsList.length; i++) {
								// 把图片分离出来
								var content = newsList[i].art_content;
								content = JSON.parse(content);
								var imgs = [];
								for (var ii = 0; ii < content.length; ii++) {
									if (content[ii].type == 'image') {
										imgs.push(content[ii].content);
									}
								}
								newsList[i].art_content = imgs;
							}
							_self.artList = _self.artList.concat(newsList);
							page++;
						}
					},
					complete: function() {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			}
		}
	}
</script>

<style>

</style>
